import React, { useEffect, useState } from 'react'

let data = [
    { id: 1, title: 'Vue.js框架' },
    { id: 2, title: '简介' },
    { id: 3, title: 'Vue.js渐进式' },
    { id: 4, title: 'Vue.js框架渐进式' },
    { id: 5, title: 'React框架' },
    { id: 6, title: 'React框架渐进式' },
    { id: 7, title: 'React简介' },
    { id: 8, title: '必备ReactVue.js' },
]

export default function BaiduSearch() {
    const [value, setValue] = useState('百度一下')
    const [list, setList] = useState([])
    /**
     * useEffect hooks的作用
     * 1、可以在组件挂载后再做一些额外的事情，比如发送异步请求
     * 2、可以监听组件指定状态，在该状态改变后做一些额外的操作，比如异步请求
     * 3、可以监听组件的卸载，卸载前可以执行一些额外的操作，一般用来做性能优化，比如清除全局变量或清除定时器
     */
    // 组件挂载后把异步获取的数据全部渲染出来
    useEffect(()=> {
        //模拟挂载后的生命周期ComponentDidMount
        setList(data)}, [])
    useEffect(() => {
        console.log(value);
        // useEffect传入的第二个参数，可以监听某个状态的变化然后做一些额外处理
        const temp = data.filter(v => v.title.toLowerCase().includes(value))
        setList(temp)
    }, [value])
    useEffect(()=>{
        //useEffect和钩子函数返回的函数会在组件卸载前自动调用，模拟卸载前的生命周期
        return () => {
            data=null//清除全局变量
        }
    })
    return (
        <div>
            <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />
            {
                list.map(item => {
                    return <p key={item.title}>
                        {item.title}
                    </p>
                })
            }
        </div>
    )
}
